<template>
  <div class="content">
    <el-form :inline="true" :model="formInline">
      <el-form-item label="发布人名称">
        <el-input v-model="formInline.userName" placeholder="请输入发布人名称" />
      </el-form-item>
      <el-form-item label="发布时间">
        <datePickerRange v-model:start="formInline.startTime" v-model:end="formInline.endTime" type="datetimerange"></datePickerRange>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="请选择审核状态">
          <el-option :label="item.label" :value="item.value" v-for="item in statusList" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="init">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableParams.records" :stripe="true" border>
      <el-table-column type="index" />
      <el-table-column prop="userName" label="发布人" align="center" min-width="120" />
      <el-table-column prop="workTypeName" label="工种类型" align="center" min-width="120" />
      <el-table-column prop="address" label="地点" align="center" min-width="300">
        <template #default="scope">
          {{scope.row.areaName}}{{scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="小记内容" prop="requirement" align="center" min-width="300">
        <template #default="scope">
          {{proxy.$utils.truncateString(scope.row.requirement?scope.row.requirement:scope.row.title,100)}}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" min-width="100">
        <template #default="scope">
          <el-tag>{{auditState_format(scope.row.status)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template #default="scope">
          <el-button type="primary" text @click="handleClick(scope.row,1)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="tableParams['total']" :total="tableParams['total']" v-model:page="formInline.pageNum" v-model:limit="formInline.pageSize" @pagination="getInfo" />

    <el-dialog v-model="open" title="详情" width="500" :before-close="handleClose">
      <el-descriptions title="" :column="1" border class="descriptions120">
        <el-descriptions-item label="发布人">{{info.userName}}</el-descriptions-item>
        <el-descriptions-item label="地点">{{info.areaName}}{{info.address}}</el-descriptions-item>
        <el-descriptions-item label="工种类别">{{info.workTypeName}}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag>{{auditState_format(info.status)}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="小记内容">
          <div class="whiteSpace">{{info.requirement}}</div>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{info.gmtCreate}}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";

const { proxy } = getCurrentInstance();
let formInline = ref({
  startTime: "",
  endTime: "",
  userName: "",
  status: null,
  pageNum: 1,
  pageSize: 10,
});
let open = ref(false);
let info = ref({});
let statusList = ref([
  { label: "完成量房", value: 0 },
  { label: "交完定金", value: 1 },
  { label: "签完合同", value: 2 },
  { label: "业主到店", value: 3 },
]);
let tableParams = ref({});

onMounted(() => {
  search();
});

let search = () => {
  formInline.value.pageNum = 1;
  getInfo();
};
let getInfo = async () => {
  tableParams.value = await proxy.$apis.platformOrderNoteList(formInline.value);
};
let auditState_format = (e) => {
  for (let index = 0; index < statusList.value.length; index++) {
    const element = statusList.value[index];
    if (element.value == e) return element.label;
  }
};
let handleClick = async (e) => {
  info.value = await proxy.$apis.platformOrderNoteDetail({ id: e.id });
  open.value = true;
};
let handleClose = () => {
  open.value = false;
};
let init = () => {
  formInline.value = {
    startTime: "",
    endTime: "",
    userName: "",
    status: null,
    pageNum: 1,
    pageSize: 10,
  };
  getInfo();
};
</script>

<style lang="scss" scoped>
.content {
  margin: 20px;
}
</style>
